<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-custom">
    <div class="w-full max-w-md p-8 bg-white rounded-2xl shadow-custom transform transition-all duration-500 hover:scale-[1.02]">
      <div class="text-center mb-8">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary">植物数据库管理系统</h2>
        <p class="text-gray-500 mt-2">请登录以访问系统</p>
      </div>
      <form @submit.prevent="handleLogin" class="space-y-6">
        <div class="space-y-2">
          <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
              <i class="fa fa-user"></i>
            </span>
            <input 
              v-model="form.username" 
              type="text" 
              id="username" 
              class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-custom" 
              placeholder="请输入用户名"
              required
            >
          </div>
        </div>
        <div class="space-y-2">
          <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
              <i class="fa fa-lock"></i>
            </span>
            <input 
              v-model="form.password" 
              type="password" 
              id="password" 
              class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-custom" 
              placeholder="请输入密码"
              required
            >
          </div>
          <p v-if="error" class="mt-1 text-sm text-danger">{{ error }}</p>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input 
              v-model="form.remember" 
              id="remember-me" 
              type="checkbox" 
              class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
            >
            <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
          </div>
          <button 
            type="button" 
            class="text-sm font-medium text-primary hover:text-primary/80 transition-custom"
            @click="forgotPassword"
          >
            忘记密码?
          </button>
        </div>
        <button 
          type="submit" 
          class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center"
          :disabled="loading"
        >
          <span v-if="!loading">登录</span>
          <span v-else>登录中...</span>
          <i class="fa fa-arrow-right ml-2"></i>
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'LoginView',
  data() {
    return {
      form: {
        username: '',
        password: '',
        remember: false
      },
      loading: false,
      error: null
    }
  },
  methods: {
    ...mapActions(['login']),
    async handleLogin() {
      this.error = null
      try {
        this.loading = true
        await this.login(this.form)
        this.$router.push('/dashboard')
      } catch (error) {
        this.error = error.message || '登录失败，请检查用户名和密码'
      } finally {
        this.loading = false
      }
    },
    forgotPassword() {
      this.$router.push('/forgot-password')
    }
  }
}
</script>

<style scoped>
.bg-gradient-custom {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.shadow-custom {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.transition-custom {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style> 